<template>
    <div class="chart-container">
        <chart id="GraphEchart" :height="data.options.height+'px'" :data="data" :width="data.options.width+'px'" :options="data.options"/>
    </div>
</template>

<script>
import {getNewEcharts} from '@/api/api'
import echart from '@/mixins/echart'
let data = {
    nodes: [{
        name: '操作系统集团',
        category: 0
    }, {
        name: '浏览器有限公司',
        category: 0
    }, {
        name: 'HTML科技',
        category: 0
    }, {
        name: 'CSS科技',
        category: 0
    }, {
        name: 'Chrome',
        category: 1
    }, {
        name: 'IE',
        category: 1
    }, {
        name: 'Firefox',
        category: 1
    }, {
        name: 'Safari',
        category: 1
    }],
    
    links: [{
        source: '浏览器有限公司',
        target: '操作系统集团',
        name: '参股',
        lineStyle: {
            color: '#86D560'
        }
    }, {
        source: 'HTML科技',
        target: '浏览器有限公司',
        name: '参股',
        lineStyle: {
            color: '#86D560'
        }
    }, {
        source: 'CSS科技',
        target: '浏览器有限公司',
        name: '参股',
        lineStyle: {
            color: '#86D560'
        }
    }, {
        source: 'Chrome',
        target: '浏览器有限公司',
        name: '董事',
        lineStyle: {
            color: '#AF89D6'
        }
    }, {
        source: 'IE',
        target: '浏览器有限公司',
        name: '董事',
        lineStyle: {
            color: '#AF89D6'
        }
    }, {
        source: 'Firefox',
        target: '浏览器有限公司',
        name: '董事'
    }, {
        source: 'Safari',
        target: '浏览器有限公司',
        name: '董事'
    }, {
        source: 'Chrome',
        target: 'JavaScript科技',
        name: '法人'
    }]
}
    const color1 = '#86D560';
    const color2 = '#AF89D6';
    const color3 = '#59ADF3';
    data.nodes.forEach(node => {
    if (node.category === 0) {
        node.symbolSize = 100;
        node.itemStyle = {
        color: color1
        };
    } else if (node.category === 1) {
        node.itemStyle = {
        color: color2
        };
    }
    });

    data.links.forEach(link => {
        link.label = {
            align: 'center',
            fontSize: 12
        };
        
        if (link.name === '参股') {
            link.lineStyle = {
            color: color2
            }
        } else if (link.name === '董事') {
            link.lineStyle = {
            color: color1
            }
        } else if (link.name === '法人') {
            link.lineStyle = {
            color: color3
            }
        }
    });

    let categories = [{
        name: '公司',
        itemStyle: {
            color: color1
        }
    },
    {
        name: '董事',
        itemStyle: {
            color: color2
        }
    }]

let options = {
    title: {
        text: '知识图谱',
    },
    legend: [{
        data: categories.map(x => x.name),
    }],
    series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 58,
        draggable: true,
        roam: true,
        focusNodeAdjacency: true,
        categories: categories,
        edgeSymbol: ['', 'arrow'],
        edgeLabel: {
        normal: {
            show: true,
            textStyle: {
            fontSize: 20
            },
            formatter(x) {
            return x.data.name;
            }
        }
        },
        label: {
            show: true
        },
        force: {
        repulsion: 2000,
        edgeLength: 120
        },
        data: data.nodes,
        links: data.links
    }]
}
export default {
    name: 'GraphEchart',
    mixins: [echart],
    created(){
        this.data.options = {...this.data.options,...options}
    },
    methods: {
        _getNewEcharts(){
            const parms = {
                echartType:"graph",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.seriesData
                    this.data.options.legend.data = res.data.legendData
                    
                }
            })
        }
    }
}
</script>
